<template>
	<div class="mine-container">
		<ShopHeader :isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder"
			:aimUrl="dataArr.aimUrl"
			:rightUrl="dataArr.rightUrl"
		/>
		<div class="top-zhanwei"></div>
		<div class="mine-header">
			<img src="../assets/images/mine/img_touxiang@2x.png" alt="">
			<p>
				<a @click='gotoLogin'>{{ isLoginIn }}</a>
			</p>
		</div>
		<div class="mine-content">
			<div class="mine-wrap">
				<router-link to='/coupon'>
					<div class="item-wrap">
						<img src="../assets/images/mine/icon_youhuiquan@2x.png" alt="">
						<p>优惠券</p>
					</div>
				</router-link>
				<router-link to='/collect'>
					<div class="item-wrap">
						<img src="../assets/images/mine/icon_shoucang@2x.png" alt="">
						<p>收藏</p>
					</div>
				</router-link>
				<router-link to='/aboutsee'>
					<div class="item-wrap">
						<img src="../assets/images/mine/icon_yuekan@2x.png" alt="">
						<p>约看</p>
					</div>
				</router-link>
				<router-link to='/myorder'>
					<div class="item-wrap">
						<img src="../assets/images/mine/icon_dingfdan@2x.png" alt="">
						<p>订单</p>
					</div>
				</router-link>
				<router-link to='/personalassistant'>
					<div class="item-wrap">
						<img src="../assets/images/mine/icon_sirenzhuli@2x.png" alt="">
						<p>私人助理</p>
					</div>
				</router-link>
				<router-link to='/smalltalk_page'>
					<div class="item-wrap">
						<img src="../assets/images/mine/icon_weiliao@2x.png" alt="">
						<p>微聊</p>
					</div>
				</router-link>
				<router-link to='/myevaluation'>
					<div class="item-wrap">
						<img src="../assets/images/mine/icon_pingjia@2x.png" alt="">
						<p>评价</p>
					</div>
				</router-link>
				<router-link to='/complaints_suggestions'>
					<div class="item-wrap">
						<img src="../assets/images/mine/icon_tousu@2x.png" alt="">
						<p>投诉建议</p>
					</div>
				</router-link>
			</div>
			<p class="mine-title">
				宜居管家
				<span> 宜居专享服务</span>
			</p>
			<div class="mine-serve-wrap">
				<div class="serve-item-wrap">
					<router-link to="/mine/contract">
						<img src="../assets/images/mine/icon_hetong@2x.png" alt="">
						<p>合同</p>
					</router-link>
				</div>
				<div class="serve-item-wrap">
					<router-link to="/mine/sublet">
						<img src="../assets/images/mine/icon_zhuanzu@2x.png" alt="">
						<p>转租</p>
					</router-link>
				</div>
				<div class="serve-item-wrap">
					<router-link to="/mine/checkout">
						<img src="../assets/images/mine/icon_tuizu@2x.png" alt="">
						<p>退组</p>
					</router-link>
				</div>
				<div class="serve-item-wrap">
					<router-link to="/mine/credit">
						<img src="../assets/images/mine/icon_zhimaxinyong@2x.png" alt="">
						<p>芝麻信用</p>
					</router-link>
				</div>
				<div class="serve-item-wrap">
					<router-link to="/mine/relet">
						<img src="../assets/images/mine/icon_xuzu@2x.png" alt="">
						<p>续租</p>
					</router-link>
				</div>
				<div class="serve-item-wrap">
					<router-link to="/mine/bill">
						<img src="../assets/images/mine/icon_zhangdan@2x.png" alt="">
						<p>账单</p>
					</router-link>
				</div>
			</div>
		</div>
		<div class="footer-zhanwei"></div>

		<FooterNav />
	</div>
</template>
<script>
	import FooterNav from "../components/footernav"
	import ShopHeader from "../components/shopheader"
	export default{
		name:'person',
		data(){
			return{
					isLoginIn:this.$cookie.get("test") != null ? JSON.parse(this.$cookie.get("test")).phonenumber : '登录 | 注册',
					dataArr:{
					isInput:false,
					iconArr:[
						{
							iconLeft:"icon-xiaoxi2",
							iconRight:this.$cookie.get("test") != null ? "icon-shezhi" : ''
						}
					],
					placeholder:"",
					aimUrl:"/smalltalk_page",
					rightUrl:"/mine/personcenter"
				}
			}
		},
		components:{
			FooterNav,
			ShopHeader
		},
		methods:{
			gotoLogin(){
				if(this.$cookie.get("test") == null){
					this.$router.push('/mine/login')
				}
			}
		}
	}
</script>
<style scoped lang="less">
	.mine-container{
		width: 100%;
		background-color: #fff;
		overflow: hidden;
		.top-zhanwei{
			width: 100%;
			height:88 / 2 / 50rem;
		}
		.footer-zhanwei{
			width: 100%;
			height:50 / 50rem;
		}
		.mine-header{
			width: 100%;
			height: 300 / 2 / 50rem;
			background-color: #f55;
			text-align: center;
			overflow: hidden;
			img{
				width: 144 / 2 / 50rem;
				height: 144 / 2 / 50rem;
				margin-top: 10 / 2 / 50rem;
				vertical-align: middle;
			}
			p{
				color: #fff;
				font-size: 15 / 50rem;
				font-weight: 700;
				margin-top: 20 / 2 / 50rem;
			}
		}
		.mine-content{
			width: 95%;
			margin: 0 auto;
			// overflow: hidden;
			.mine-wrap,.mine-serve-wrap{
				width: 100%;
				height: 378 / 2 / 50rem;
				box-shadow: 0 0 10 / 50rem 1 / 50rem rgba(0,0,0,.1);
				border-radius: 10 / 50rem;
				margin: 20 / 2 / 50rem 0;
				.item-wrap,.serve-item-wrap{
					float: left;
					width: 25%;
					height: 378 / 2 / 2 / 50rem;
					text-align: center;
					img{
						width: 88 / 2 / 50rem;
						height: 88 / 2 / 50rem;
						margin-top: 28 / 2 / 50rem;
					}
					p{
						color: #333;
						font-size: 15 / 50rem;
						font-weight: 700;
						margin-top: 10 / 2 / 50rem;
					}
				}
			}
			.mine-serve-wrap{
				.serve-item-wrap{
					width: 33.3%;
					img{
						width: 60 / 2 / 50rem;
						height: 65 / 2 / 50rem;
					}
					p{
						font-size: 13 / 50rem;
						// font-weight: normal;
					}
				}
			}
		}
		.mine-title{
			width: 100%;
			padding: 0 40 / 2 / 50rem;
			box-sizing: border-box;
			color: #333;
			font-size: 15 / 50rem;
			font-weight: 700;
			span{
				font-size: 10 / 50rem;
				font-weight: normal;
			}
		}
	}
</style>